<template>
  <el-card class="maxcard">
    <el-page-header content="热门文章" @back="$router.go(-1)"></el-page-header>
    <div class="title">
      <header>
        <h2>{{ articleData.articleTitle }}</h2>
        <div class="articletop">
          <el-button icon="el-icon-reading" type="text">{{ articleData.articleClassification }}</el-button>
          <el-button icon="el-icon-user" type="text">{{ articleData.userName }}</el-button>
          <el-button icon="el-icon-date" type="text">{{ articleData.articleDate }}</el-button>
          <el-button icon="el-icon-view" type="text">{{ articleData.articleViews }}</el-button>
          <el-button icon="el-icon-chat-line-square" type="text">{{ articleData.articleCommentCount }}</el-button>
          <el-button :icon="icon" type="text" @click="articleLike">{{ articleData.articleLikeCount }}</el-button>
          <el-button type="text">最后更新：{{ articleData.articleUpdata }}</el-button>
        </div>
      </header>
      <div class="article">
        <h4 class="article_title">摘要</h4>
        <p v-html="articleData.articleAbstract"></p>
        <h4 class="article_title">正文</h4>
        <p v-html="articleData.articleContent"></p>
      </div>
    </div>
  </el-card>
  <el-card class="card_two">
    <div style="text-align: right">
      <div style="text-align: left">
        <h3>撰写评论</h3>
      </div>
      <el-input
          v-model="addList.commentContent"
          :rows="8"
          placeholder="快来评论吧！"
          type="textarea">
      </el-input>
      <el-button plain type="primary" @click="addCommets">发送</el-button>
      <div>
        <el-divider content-position="center">已有{{ articleData.articleCommentCount }}条评论</el-divider>
      </div>
    </div>
    <div v-for="(item,index) in dataList" :key="index" class="msgMax">
      <div style="position: relative">
        <el-avatar :src="item.users.userProfilePhoto" class="avatar" size="medium"></el-avatar>
        <div class="p1"><span id="namefont" class="namefont">{{ item.userName }}</span></div>
        <div class="p1" style="float: right;">
          <el-button type="text" icon="el-icon-chat-round" @click="reply(item,Item)">回复</el-button>
        </div>
      </div>
      <p style="width: 90%" v-html="item.commentContent"></p>
      <p class="p2">{{ item.commentDate }}</p>
      <div v-for="(Item , index) in item.comment" :key="index" style="background: rgba(238,241,241,0.98);">
        <div class="commdiv">
          <p class="p3"><span class="namefont">{{ Item.userName }} <span
              v-if="Item.userNames!==null"> 回复 </span> {{ Item.userNames }}</span>：{{ Item.commentContent }}</p>
          <p style="flex: 1"></p>
          <p>
            <el-button type="text" icon="el-icon-chat-round" @click="reply(item,Item)">回复</el-button>
          </p>
        </div>
      </div>
      <div v-if="commentId===item.commentId" style="text-align: right;margin-top: 10px;">
        <el-input
            v-model="addLists.commentContent"
            :placeholder="'回复 '+Commentname"
            :rows="3"
            type="textarea">
        </el-input>
        <el-button plain type="success" @click="Addlist">发送</el-button>
      </div>
    </div>
  </el-card>
  <el-backtop></el-backtop>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "Aetails",
  data() {
    return {
      icon: 'el-icon-star-off',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      Commentname: '',
      item: '',
      dialogFormVisible: true,
      commentId: '',
      formdata: {
        articleId: this.$route.params.id,
        articleCommentCount: '',
      },
      articleData: '',
      userToken: '',
      addLists: {
        articleId: this.$route.params.id,
        commentContent: '',
        parentCommentId: '',
        userName: '',
      },
      addList: {
        commentContent: '',
        userName: '',
        articleId: this.$route.params.id,
      },
      dataList: {},
      DataList: {},
    }
  },

  methods: {
    getLike() {
      this.$axios.post('/articles/ArticlesLikeByUser', this.addList).then((res) => {
        if (res.data.success) {
          this.icon = 'el-icon-star-off';
        } else {
          this.icon = 'el-icon-star-on';
        }
      })
    },
    Addlist() {
      this.addLists.parentCommentId = this.commentId;
      this.$axios.post('/comments/addController', this.addLists).then((res) => {
        if (res.data.success) {
          ElMessage.success({
            message: '评论成功！',
            type: 'success'
          });
          this.addLists.commentContent = '';
          this.addLists.userNames = '';
          this.commentId = '';
          this.getCommets();
        } else {
          ElMessage.error('请先登录！');
        }
      });
    },
    reply(item, Item) {
      if (Item !== undefined) {
        this.Commentname = Item.userName;
        this.addLists.userNames = Item.userName;
      }else {
        this.Commentname = item.userName;
      }
      if (this.commentId === item.commentId) {
        this.commentId = '';
      } else {        this.commentId = item.commentId;
      }
    },
    getArticleById() {
      this.$axios.post('/articles/getArticlesByid', this.addList).then((res) => {
        this.articleData = res.data.data;
      });
    },
    addCommets() {
      if (this.addList.commentContent === '') {
        ElMessage.error('内容不能为空');
      } else if (this.addList.userName !== '') {
        this.$axios.post('/comments/addControllers', this.addList).then((res) => {
          if (res.data.success) {
            ElMessage.success({
              message: '恭喜你，发送成功',
              type: 'success'
            });
            this.getCommets();
            this.addList.commentContent = '';
          } else {
            ElMessage.error('发送错误，联系管理员');
          }
        });
      } else {
        ElMessage.error('请先登录');
      }
    },
    getCommets() {
      this.$axios.post('/comments/getControllers', this.addList).then((res) => {
        console.log(res)
        this.dataList = res.data.data;
      });
    },
    articleLike() {
      if (this.icon === 'el-icon-star-off') {
        this.$axios.post('/articles/addArticlesLike', this.addList).then((res) => {
          if (res.data.success) {
            this.getLike();
            this.getArticleById();
            ElMessage.success({
              message: '点赞成功',
              type: 'success'
            });
          } else {
            ElMessage.warning({
              message: '请先登录',
              type: 'warning'
            });
          }
        })
      } else {
        this.$axios.post('/articles/delArticlesLike', this.addList).then((res) => {
          if (res.data.success) {
            this.getLike();
            this.getArticleById();
            ElMessage.error({
              message: '取消点赞成功',
              type: 'success'
            });
          }
        })
      }
    },
  },
  created() {
    window.scrollTo(0, 0);
    this.userToken = localStorage.getItem('token');
    this.$axios.post("/user/getuser", {'userToken': this.userToken}).then((res) => {
      if (res.data.success) {
        this.addList.userName = res.data.data.userName;
        this.addLists.userName = res.data.data.userName;
        this.getLike();
        this.getArticleById();
        this.getCommets();
      } else {
        this.$confirm('检测到未登录用户，是否离开页面前往登录？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '放弃'
        })
            .then(() => {
              this.$router.push("/blog/personal")
              this.$message({
                type: 'info',
                message: '请登录'
              });
            })
            .catch(action => {
              this.$router.push("/blog/article")
              this.$message({
                type: 'info',
                message: action === 'cancel'
                    ? '放弃并离开页面'
                    : '停留在当前页面'
              })
            });
      }
    });
  },

}
</script>

<style scoped>
.maxcard {
  margin-bottom: 20px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  border-radius: 0px;
}

.title {
  padding: 0 100px;
}

header .el-button {
  color: #7d7a7a;
  margin: 10px 20px 0px 0px;
}

.articletop {
  border-bottom: solid 0.5px #e2e0e0;
}

.card_two {
  padding: 0 100px;
  border-radius: 5px;
}

.p1 {
  display: inline-block;
  padding-bottom: -5px;
  font-weight: bold;
}

.p2 {
  font-size: 14px;
  color: #a09d9d;
}

.p3 {
  /*line-height: 32px;*/
  margin: 0;
  padding: 0;
}

.p3 .el-button {
  min-height: 20px !important;
  padding: 0;
}

.commdiv {
  display: flex;
}

.commdiv p {
  margin: 0;
  line-height: 32px;
}

.commdiv p .el-button {
  min-height: 20px !important;
  padding: 0;
}

.msgMax {
  margin-bottom: 40px;
}

.namefont {
  color: rgba(65, 134, 112, 0.97)
}

#namefont {
  margin-left: 5px;
  position: absolute;
  bottom: 9px;
}

.avatar {
  display: inline-block;
}
</style>